<template>
  <div id="app">
    <div class="container">
      <!-- 顶部框模块 -->
      <div class="form-group">
        <div class="input-group">
          <h4>品牌管理</h4>
        </div>
      </div>

      <!-- 数据表格 -->
      <table class="table table-bordered table-hover mt-2">
        <thead>
          <tr>
            <th>编号</th>
            <th>资产名称</th>
            <th>价格</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td> {{item.id}} </td>
            <td>{{item.name}}</td>

            <!-- 如果价格超过100，就有red这个类 -->
            <td :class="{red:item.price>100}">{{item.price}}</td>
            <td>{{formatDate(item.time)}}</td>
            <td><a @click.prevent="del(item.id)" href="#" >删除</a></td>
          </tr>
        </tbody>
          
        <tfoot v-if="list.length==0">
          <tr>
            <td colspan="5" style="text-align: center">暂无数据</td>
          </tr>
        </tfoot>
           
      </table>

      <!-- 添加资产 -->
      <form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="资产名称"
              v-model.trim.lazy="name"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="价格"
              v-model.trim.lazy.number="price"
            />
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 阻止表单提交 -->
        <button @click.prevent="add" class="btn btn-primary">添加资产</button>
      </form>
    </div>
  </div>
</template>

<script>
    /*
      需求：
        1.将list中数据渲染至页面中
          1.1 找到tbody,给tr设置v-for="item in list" :key="item.id"
          1.2 给tr中的各项td分别添加对应数据
          1.3 价格显示的td中,如果价格大于100,则给该td添加类名改变字体颜色  :class="{red:item.price>100}"
        
        2.新增功能
          2.1 给form中的button绑定点击事件
            2.1.1 阻止表单默认提交-->@click.prevent="add"
            2.1.2 在methods中新添一个方法add
          2.2 使用v-model方法将表单数据与数据变量双向绑定
          2.3 非空校验-->使用表单修饰符处理变量接收的数据(.trim、.number、.lazy)
            2.3.1 在add函数体中判断this.name和this.price的length属性是否为0
          2.4 将用户成功输入的数据生成对象添加至list数组-->对象由四个成员(id,name,price,time)
            2.4.1 对象id由数组中最后一个元素对象的id+1得到-->考虑数组可能无元素,三元添加默认值
            2.4.2 对象name和price由用户输入可得,time由内置方法Date实例化得到
          2.5 添加成功后清空表单数据-->设置name为空,price为0(利用双向绑定机制)

        3.删除功能-->实际开发中是根据id来删除数组中数据
          3.1 给删除按钮绑定点击事件-->阻止表单默认行为-->@click.prevent="del"
          3.2 将id传入事件处理函数的实参中-->@click.prevent="del(item.id)"
          3.3 根据id来获取对象在数组中的下标,通过下标来让数组删除元素
            3.3.1 在del函数体中使用forEach方法遍历this.list,判断item.id与传入的id一致性
            3.3.2 在比对成后将获取的下标(forEach第二个参数)让list删除对应数据splice(index,1)
          3.4 若数组数据都删除,显示原本隐藏的tfoot标签-->v-if="！list.length"
          3.5 删除完数组数据重新添加时会由于id为undefined报错,上面三元表达式设置默认id可解决

        4.格式化时间
          4.1 下载moment三方包-->yarn add moment
          4.2 在main.js中引入
          4.3 在methods中自定义一个函数formatDate格式化日期,在日期处调用该函数(传入日期对象作参数)
          4.4 formatDate函数处理日期需要用moment,先在全局引入moment(js文件有作用域,哪里调用就哪里引入)
          4.5 formatDate函数体中将moment(date).format('YYYY-MM-DD HH：mm：ss')格式化后的日期返回出去
    */ 


  //  引入moment-->formatDate函数需要使用,用全局变量接收
      import moment from 'moment'
export default {
  data() {
    return {
      name: "", // 名称
      price: 0, // 价格
      list: [
        { id: 100, name: "外套", price: 199, time: new Date('2010-08-12')},
        { id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
        { id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
      ],
    };
  },
  methods:{
    add(){
      if(this.name.length===0||this.price.length===0){
        return alert('资产名称和价格不能为0')
      }
      this.list.push({
        id:this.list.length>0?this.list[this.list.length-1].id+1:100,
        name:this.name,
        price:this.price,
        time:new Date()
      })
      this.name='',
      this.price=0
    },
    del(id){
      this.list.forEach((item,index)=>{
        if(item.id===id){
          this.list.splice(index,1)
        }
      })
    },
    formatDate(date){
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
};
</script>

<style >
.red{
  color: red;
}
</style>